<template>
	<view class="item">
		<view class="left">
			<view class="type">
				已认证
			</view>
			<view class="avatar">
				<image class="img" src="/static/img/my/avatar.png"></image>
			</view>
			<view class="name">
				张先生
			</view>
			<view class="age">
				45岁
			</view>
			<Button2>原料区</Button2>
		</view>
		<view class="right">
			<view class="line">
				<view class="title">
					身份证号
				</view>
				<view class="val">
					510622111111113454
				</view>
			</view>
			<view class="line">
				<view class="title">
					电话
				</view>
				<view class="val phone">
					<text>13511111111</text>
					<image class='icon-phone' src="/static/img/common/phone.png"></image>
				</view>
			</view>
			<view class="line">
				<view class="title">
					累计收料方量
				</view>
				<view class="val">
					2400方
				</view>
			</view>
			<view class="line">
				<view class="title">
					累计出料方量
				</view>
				<view class="val">
					2400方
				</view>
			</view>

		</view>
	</view>
</template>

<script setup lang="ts">
	import Button2 from '@/components/button2/button2.vue';
	defineProps({
		people: {
			type: Object,
			default: () => ({})
		}
	})
</script>

<style scoped lang="scss">
	.item {
		position: relative;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding-bottom: 24rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		background-color: #fff;
		box-sizing: border-box;

		.type {
			position: absolute;
			left: 0;
			top: 0;
			padding: 9rpx 30rpx;
			color: #fff;
			background: linear-gradient(270deg, #6BA8FA 0%, #2E87FF 100%);
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 8rpx 0rpx 24rpx 0rpx;
			z-index: 1;
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 62rpx 22rpx 0rpx;

			.avatar {
				// margin: 10rpx 0rpx;

				.img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.name {
				font-weight: bold;
				margin: 6rpx 0;
			}

			.age {
				margin-bottom: 6rpx;
				color: $primary-color;
			}
		}

		.right {
			flex: 1;
			padding: 8rpx 0rpx 0rpx 20rpx;
			box-sizing: border-box;

			.line {
				margin-top: 20rpx;
				margin-right: 24rpx;
				padding: 12rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #EFF6FE;
				border-radius: 8rpx;

				.title {
					color: #989DA5;
				}

				.val {
					font-weight: bold;

					&.phone {
						display: flex;
						align-items: center;
						color: $primary-color;
					}
				}
			}

			.icon-phone {
				margin-left: 6rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
</style>